<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
        }

        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            font-size: 10px;
            color: #000;
        }

        .box {
            color: #d2dbe5;
            font-size: 13px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-image: url(./图片素材/bg.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .top {
            height: 8%;
            width: 95%;
            margin: 30px auto 0px;
            display: flex;
            justify-content: space-between;
        }

        .tl {
            width: 30%;
            display: flex;
            justify-content: space-around;
        }

        .tr {
            font-size: 30px;
            font-weight: 555;
            text-align: center;
            margin-top: -25px;
            color: #fff;
        }

        .topl {
            width: 80px;
            height: 30px;
            background-image: url(./图片素材/bnt.png);
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-size: 13px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .content {
            width: 95%;
            height: 90%;
            margin: auto;

            display: flex;
        }

        .left {
            width: 33%;
            height: 100%;
        }

        .right {
            width: 30%;
            height: 100%;

        }

        .center {
            width: 37%;
            height: 100%;
        }

        .p1 {
            text-align: center;
            margin-top: 6px;
            margin-bottom: 3px;

        }

        .p2 {
            margin: auto;
            width: 90%;
            display: flex;
            font-size: 12px;
            justify-content: space-between;
        }

        /* 左边图形 */
        .l1 {
            overflow: hidden;
            width: 100%;
            height: 30%;
            background-image: url(./图片素材/pulefttop.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .l2 {
            overflow: hidden;
            width: 100%;
            height: 32%;
            background-image: url(./图片素材/aleftboxtmidd.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-top: 5px;
        }

        .l3 {
            overflow: hidden;
            width: 100%;
            height: 30%;
            background-image: url(./图片素材/aleftboxtmidd.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-top: 5px;
        }

        .l3b {
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .l3b h2 {
            font-size: 16px;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        .l3b img {
            width: 10px;
            height: 10px;
            vertical-align: middle;
        }

        .c3 {
            overflow: hidden;
            width: 94%;
            margin: auto;
            height: 32%;
            background-image: url(./图片素材/mbox1.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-top: 5px;
        }

        .h {
            display: flex;
            justify-content: space-around;
        }
        
        .l1a,
        .l1b,
        .l2a,
        .l2b,
        .l3a,
        .l3b,
        .c3a {
            width: 45%;
            height: 150px;
            background: rgba(2, 54, 108, .6);
        }

        .c3b {
            width: 45%;
            height: 148px;
            background: rgba(2, 54, 108, .6);
        }
        .l3a{
               background-image: url(./图片素材/1667740693598.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .b {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

        }

        .c2a {
            width: 96%;
            height: 65px;
            font-size: 7px;
            display: flex;
            padding-top: 3px;
            background: rgba(2, 54, 108, .4);
        }

        .c2b {
            width: 96%;
            height: 65px;
            font-size: 7px;
            padding-top: 3px;
            display: flex;
            background: rgba(2, 54, 108, .9);

        }

        .c2a img {
            width: 15px;
            height: 15px;
            margin-left: 5px;
            margin-right: 5px;
            vertical-align: top;
        }

        .c2b img {
            width: 15px;
            height: 15px;
            margin-left: 5px;
            margin-right: 5px;
            vertical-align: top;
        }

        .h1 {
            width: 98%;
            height: 61%;
            display: flex;
            justify-content: space-around;
        }

        .c1 {
            width: 45%;
            height: 100%;
            background-image: url(./图片素材/left1box.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;

        }

        .c2 {
            width: 51%;
            height: 100%;
            background-image: url(./图片素材/leftbox2.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;

        }

        .c1a {
            width: 45%;
            height: 130px;
            margin-bottom: 10px;
            background: rgba(2, 54, 108, .6);
            text-align: center;
            padding-top: 35px;
            overflow: hidden;
        }

        h2 {
            margin-top: 15px;
            margin-bottom: 10px;
            font-size: 25px;
        }

        .c1a img {
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }

        .r1,
        .r2,
        .r3 {
            width: 95%;
            height: 30%;
            margin-bottom: 6px;
            background-image: url(./图片素材/mbox2.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .r1a,
        .r2a,
        .r3a {

            width: 90%;
            margin: auto;
            height: 150px;
            background: rgba(2, 54, 108, .6);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <!-- 头部 -->
            <div class="tl">
                <div class="topl">警情警力</div>
                <div class="topl">实有人口</div>
                <div class="topl">实有人口</div>
                <div class="topl">实有人口</div>
            </div>
            <div class="tr">
                舆情分析
            </div>
            <div class="tl">
                <div class="topl">警情警力</div>
                <div class="topl">实有人口</div>
                <div class="topl">实有人口</div>
                <div class="topl">实有人口</div>
            </div>

        </div>
        <div class="content">
            <div class="left">
                <div class="l1">
                    <div class="p">
                        <p class="p1" style="width: 50%;">舆情来源分析</p>
                        <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>
                    </div>
                    <div class="h">
                        <div class="l1a">
                        <ul style="text-align: center; position: relative; color: #030303">
                            <li
                                style="width: 15px; height: 15px; background-color: #ac3ff2; border-radius: 50%; position: absolute; top: 30px; left: 25px;">
                                交</li>
                            <li
                                style="width: 50px; height: 50px; background-color: #0078ff; border-radius: 50%; position: absolute; top: 40px; left: 50px; line-height: 50px;">
                                无效报警</li>
                            <li
                                style="width: 25px; height: 25px; background-color: #ffff00; border-radius: 50%; position: absolute; top: 40px; right: 50px; line-height: 25px;">
                                求助</li>
                            <li
                                style="width: 15px; height: 15px; background-color: #77b5fb; border-radius: 50%; position: absolute; top: 100px; left: 30px; line-height:15px;">
                                形</li>
                            <li
                                style="width: 60px; height: 60px; background-color: #ff6c00; border-radius: 50%; position: absolute; bottom: -145px; right: 70px; line-height: 60px;">
                                灾害事故</li>
                            <li
                                style="width: 50px; height: 50px; background-color: #9cff00; border-radius: 50%; position: absolute; bottom: -145px; right:5px; line-height: 50px;">
                                投诉2</li>
                        </ul>


                        </div>
                        <div class="l1b">

                        </div>
                    </div>

                </div>
                <div class="l2">
                    <div class="p">
                        <p class="p1">舆情来源分析</p>
                        <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>
                    </div>
                    <div class="h">
                        <div class="l2a">
                           
                        </div>
                        <div class="l2b">

                        </div>
                    </div>
                </div>
                <div class="l3">
                    <div class="p">
                        <p class="p1">舆情来源分析</p>
                        <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>
                    </div>
                    <div class="h">
                        <div class="l3a" style="width: 62%;">
                          
                        </div>
                        <div class="l3b" style="width: 30%;">
                            <p>今日疫情总数</p>
                            <h2 style="color: #e4acf7;">54</h2>
                            <p style="color: #ccc;">环比<img src="./图片素材/iconup.png" alt="">2% </p>
                            <p>今日疫情总数</p>
                            <h2 style="color: #1eafe5;">54</h2>
                            <p style="color: #ccc;">环比<img src="./图片素材/icondown.png" alt="">2% </p>
                            <p>今日疫情总数</p>
                            <h2 style="color: #b8d41a;">54</h2>
                            <p style="color: #ccc;">环比<img src="./图片素材/icondown.png" alt="">2% </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="h1">
                    <div class="c1">
                        <div class="p">
                            <p class="p1">今日舆情</p>
                            <p class="p2"><span>状态：已调解</span><span>2018-06-14</span></p>
                        </div>
                        <div class="b">
                            <div class="c1a">
                                <p>今日疫情总数</p>
                                <h2 style="color: #e4acf7;">54</h2>
                                <p style="color: #ccc;">环比<img src="./图片素材/iconup.png" alt="">2% </p>
                            </div>
                            <div class="c1a">
                                <p>今日疫情总数</p>
                                <h2 style="color: #1eafe5;">54</h2>
                                <p style="color: #ccc;">环比<img src="./图片素材/icondown.png" alt="">2% </p>
                            </div>
                            <div class="c1a">
                                <p>今日疫情总数</p>
                                <h2 style="color: #e4acf7;">54</h2>
                                <p style="color: #ccc;">环比<img src="./图片素材/iconup.png" alt="">2% </p>
                            </div>
                            <div class="c1a">
                                <p>今日疫情总数</p>
                                <h2 style="color: #b8d41a;">54</h2>
                                <p style="color: #ccc;">环比<img src="./图片素材/icondown.png" alt="">2% </p>
                            </div>
                        </div>

                    </div>
                    <div class="c2">
                        <div class="p">
                            <p class="p1">今日舆情</p>
                            <p class="p2"><span>状态：已调解</span><span>2018-06-14</span></p>
                        </div>
                        <div class="b">
                            <div class="c2a">
                                <img src="./图片素材/hot.png" alt="">
                                <p>
                                    村民王某银杯隔壁邻居的狗咬了,产生纠<br>纷，村民报警。<br>新浪微博 转发 ：86 2019-06-14 11:08:56
                                </p>
                            </div>
                            <div class="c2b">
                                <img src="./图片素材/hot.png" alt="">
                                <p>
                                    村民王某银杯隔壁邻居的狗咬了,产生纠<br>纷，村民报警。<br>新浪微博 转发 ：86 2019-06-14 11:08:56
                                </p>
                            </div>
                            <div class="c2a">
                                <img src="./图片素材/hot.png" alt="">
                                <p>
                                    村民王某银杯隔壁邻居的狗咬了,产生纠<br>纷，村民报警。<br>新浪微博 转发 ：86 2019-06-14 11:08:56
                                </p>
                            </div>
                            <div class="c2b">
                                <img src="./图片素材/hot.png" alt="">
                                <p>
                                    村民王某银杯隔壁邻居的狗咬了,产生纠<br>纷，村民报警。<br>新浪微博 转发 ：86 2019-06-14 11:08:56
                                </p>
                            </div>
                            <div class="c2a">
                                <img src="./图片素材/hot.png" alt="">
                                <p>
                                    村民王某银杯隔壁邻居的狗咬了,产生纠<br>纷，村民报警。<br>新浪微博 转发 ：86 2019-06-14 11:08:56
                                </p>
                            </div>

                        </div>

                    </div>
                </div>


                <div class="c3">
                    <div class="p">
                        <p class="p1">舆情来源分析</p>
                        <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>
                    </div>
                    <div class="h">
                        <div class="c3a" style="width: 62%;">
                            1
                        </div>
                        <div class="c3b" style="width: 30%;">
                            <div class="c1a" style="width: 100%;">
                                <p>今日疫情总数</p>
                                <h2 style="color: #e4acf7;">54</h2>
                                <p style="color: #ccc;">环比<img src="./图片素材/iconup.png" alt="">2% </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="r1">

                    <p class="p1">舆情类别分析</p>
                    <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>

                    <div class="r1a">

                    </div>
                </div>
                <div class="r2">

                    <p class="p1">七日舆情走向</p>
                    <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>

                    <div class="r2a">

                    </div>
                </div>
                <div class="r3">

                    <p class="p1">矛盾纠纷七日数据分析

                    </p>
                    <p class="p2"><span>地区：甘孜</span><span>2018-06-14</span></p>

                    <div class="r3a">

                    </div>
                </div>
            </div>




        </div>




    </div>
</body>
<script src="./echarts.min.js"></script>
<script>
    const r3 = echarts.init(document.querySelector('.r3a'));
    const r3options = {
        legend: {
            top: '5%',
            left: 'center',
            textStyle: {
                color: '#fff',
            }
        },
        color: ['#00f1fc', '#00b7ee'],
        series: [{
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 1048,
                name: '境外',
                label: {
                    color: '#00f1fc'
                }
            }, {
                value: 735,
                name: '境内',
                label: {
                    color: '#00b7ee'
                }
            },],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    }
    r3.setOption(r3options)
    // 七日舆情走势分析
    const r2 = echarts.init(document.querySelector('.r2a'));
    const r2options = {
        grid: {
            top: "20% ",
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        color: '#57af87',
        textStyle: {
            color: '#57af87'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['6-08', '6-09', '6-10', '6-11', '6-12', '6-13', '6-14']
        },
        yAxis: {
            type: 'value',
            boundaryGap: false,
        },
        series: [{
            data: [125, 140, 100, 140, 90, 230, 200],
            type: 'line',
            areaStyle: {
                color: '#57af87'
            }
        }]
    }
    r2.setOption(r2options)
    //舆情类别分析
    const r1 = echarts.init(document.querySelector('.r1a'));
    const r1options = {
        color: ['#76c4bf', '#e5ffc7', '#508097', '#4d72d9'],
        series: [{
            name: 'Area Mode',
            type: 'pie',
            radius: [10, 60],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [{
                value: 50,
                name: '涉蒙',
                label: {
                    color: '#76c4bf'
                }

            }, {
                value: 20,
                name: '涉疆',
                label: {
                    color: '#e5ffc7'
                }
            }, {
                value: 60,
                name: '涉军',
                label: {
                    color: '#508097'
                }
            }, {
                value: 10,
                name: '涉恐',
                label: {
                    color: '#4d72d9'
                }
            }, {
                value: 20,
                name: '涉藏',
                label: {
                    color: '#76c4bf'
                }
            }, {
                value: 60,
                name: '涉稳',
                label: {
                    color: '#e5ffc7'
                }
            }, {
                value: 60,
                name: '涉警',
                label: {
                    color: '#508097'
                }
            }]
        }]
    }
    r1.setOption(r1options)
    //舆论同比分析
    const c3 = echarts.init(document.querySelector('.c3a'));
    const c3options = {
        grid: {
            top: "20% ",
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        legend: {
            data: ['2017年', '2018年', '同比增速']
        },
        xAxis: [{
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisPointer: {
                type: 'shadow'
            }
        }],
        yAxis: [{
            type: 'value',
            name: "2017年",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            },
            nameTextStyle: {
                lineHeight: 10,
            }
        }, {
            type: 'value',
            name: "2018年",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }],
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            {
                name: 'Evapora',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                        { offset: 0.5, color: '#00cbe4' },
                        { offset: 1, color: '#00cbe4' }
                    ])
                },
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 139.6, 169.2, 39.6, 25.0, 6.8, 3.3
                ]
            },
            {
                name: 'Evaporation',
                type: 'bar',

                // showBackground:true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                        { offset: 0.5, color: '#a05df1' },
                        { offset: 1, color: '#a05df1' }
                    ])
                },

                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ]
            }, {
                name: 'Temperature',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }]
    }
    c3.setOption(c3options)
    // 舆情环比分析
    
    // var l3 = echarts.init(document.querySelector('.l3a'));
    // var l3option;

    // // See https://github.com/ecomfe/echarts-stat
    
    // const data = [
    //     [3.275154, 2.957587],
    //     [-3.344465, 2.603513],
    //     [0.355083, -3.376585],
    //     [1.852435, 3.547351],
    //     [-2.078973, 2.552013],
    //     [-0.993756, -0.884433],
    //     [2.682252, 4.007573],
    //     [-3.087776, 2.878713],
    //     [-1.565978, -1.256985],
    //     [2.960769, 3.079555],
    //     [-3.275518, 1.577068],
    //     [0.639276, -3.41284]
    // ];
    
    
    // var COLOR_ALL = [
    //     '#37A2DA',
    //     '#e06343',
    //     '#37a354',
    //     '#b55dba',
    //     '#b5bd48',
    //     '#8378EA',
    //     '#96BFFF'
    // ];
    // var pieces = [];
    // for (var i = 0; i < 6; i++) {
    //     pieces.push({
    //         value: i,
    //         label: 'cluster ' + i,
    //         color: COLOR_ALL[i]
    //     });
    // }
    // option = {
    //     dataset: [
    //         {
    //             source: data
    //         },
    //         {
    //             transform: {
    //                 type: 'ecStat:clustering',
    //                 // print: true,
    //                 config: {
    //                     clusterCount: 6,
    //                     outputType: 'single',
    //                     outputClusterIndexDimension: 2
    //                 }
    //             }
    //         }
    //     ],
    //     tooltip: {
    //         position: 'top'
    //     },
    //     visualMap: {
    //         type: 'piecewise',
    //         top: 'middle',
    //         min: 0,
    //         max: 6,
    //         left: 10,
    //         splitNumber: 6,
    //         dimension: 2,
    //         pieces: pieces
    //     },
    //     grid: {
    //         left: 120
    //     },
    //     xAxis: {},
    //     yAxis: {},
    //     series: {
    //         type: 'scatter',
    //         encode: { tooltip: [0, 1] },
    //         symbolSize: 15,
    //         itemStyle: {
    //             borderColor: '#555'
    //         },
    //         datasetIndex: 1
    //     }
    // };

    // l3.setOption(l3option);



    // 舆情区域分析
    const l2 = echarts.init(document.querySelector('.l2a'));
    const l2b = echarts.init(document.querySelector('.l2b'));
    const l2boptions = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: "5% ",
            left: '15%',
            right: '4%',
            bottom: '1%',
            containLabel: true
        },
        textStyle: {
            color: '#fff'
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            data: ['5 微博', '4 网站', '3 新闻', '2 贴吧', '1 论坛',],


        },
        series: [{
            name: '2011',
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    //其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#9dc184'
                    }, {
                        offset: .6,
                        color: '#64b797'
                    }, {
                        offset: 1,
                        color: '#25aeaf'
                    }]),

                },

            },
            data: [50, 100, 150, 400, 500]
        }]
    }
    l2b.setOption(l2boptions)
    const l2options = {
        angleAxis: {
            type: 'category',
            color:'#8aa2bb',
            data: ['甘孜县', '炉霍县', '白玉县', '雅江县', '康定市']
        },
        radiusAxis: {},
        polar: {},
        series: [{

            type: 'bar',
            data: [1, 2, 3, 4, 3, 5, 1],
            coordinateSystem: 'polar',
             center: ['50%', '50%'],
            name: 'A',
            stack: 'a',
            emphasis: {
                focus: 'series'
            }
        }, {
            type: 'bar',
            data: [10000, 8000, 3000, 3000, 2000, 2500, 2000, 5000, 4000],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
                focus: 'series'
            }
        }, {
            type: 'bar',
            data: [1, 2, 3, 4, 1, 2, 5],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
                focus: 'series'
            }
        }]
    }
    l2.setOption(l2options)
    // 舆情来源分析
    const l1b = echarts.init(document.querySelector('.l1b'));
    const l1boptions = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: "5% ",
            left: '15%',
            right: '4%',
            bottom: '1%',
            containLabel: true
        },
        textStyle: {
            color: '#fff'
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'category',
            data: ['5 微博', '4 网站', '3 新闻', '2 贴吧', '1 论坛',],


        },
        series: [{
            name: '2011',
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    //其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始.
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        offset: 0,
                        color: '#9dc184'
                    }, {
                        offset: .6,
                        color: '#64b797'
                    }, {
                        offset: 1,
                        color: '#25aeaf'
                    }]),

                },

            },
            data: [50, 100, 150, 400, 500]
        }]
    }
    l1b.setOption(l1boptions)

</script>

</html>